<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
    <div id="root">
        <h5>学习名称：{{name}}</h5>
        <h5>学习地址：{{addr}}</h5>
        <hr>
        <button @click="addSex">点击添加性别</button>
        <h5>姓名：{{student.name}}</h5>
        <h5 v-if = "student.sex">性别：{{student.sex}}</h5>
        <h5>年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h5>
    </div>

    <script type="text/javascript">
        Vue.config.performance = false;
        const vm = new Vue({
            el:'#root',
            data:{
                name:'hndx',
                addr:'hn',
                student:{
                    age:{
                        rAge:30,
                        sAge:18,
                    },

                },
            },
            methods:{
                addSex(){
                    //Vue.set(this.student,'sex','男')
                    this.$set(this.student, 'sex', '男')
                }
            }
        })

    </script>

</body>
</html>